.fade-enter-active {
    animation: fade-in 1s;
}

.fade-leave-active {
    animation: fade-out 1s;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-window-enter-active {
    /* animation: fade-window-in .1s; */
    opacity: 1;
}

.fade-window-leave-active {
    animation: fade-window-out .8s;
}

@keyframes fade-window-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-window-out {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 0.8;
        left: 30%;
        right: 30%;
    }
    100% {
        opacity: 0;
        left: 100%;
        right: 100%;
        top: 100%;
    }
}

.fade-menu-enter-active {
    animation: fade-menu-in .1s;
}

.fade-menu-leave-active {
    animation: fade-menu-out .1s;
}

@keyframes fade-menu-in {
    0% {
        width: 0px;
        opacity: 0;
    }
    100% {
        width: 200px;
        opacity: 1;
    }
}

@keyframes fade-menu-out {
    0% {
        width: 200px;
        opacity: 1;
    }
    100% {
        width: 0px;
        opacity: 0;
    }
}

@keyframes jumpAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    0% {
        transform: translateY(0);
    }
}

@keyframes dockTitleAnimation {
    0% {
        opacity: 0;
        top: 0;
    }
    100% {
        opacity: 1;
        top: -66px;
    }
}

@keyframes loginErrorAnimation {
    0% {
        margin-left: -30px;
    }
    50% {
        margin-left: 30px;
    }
    100% {
        margin-left: 0;
    }
}